<template>
	<Header title="图书馆">
		<view class="container">
			<view class="search-warp">
				<view class="icon"></view>
				<input placeholder="请输入关键字" />
			</view>
		</view>
		<up-tabs :list="state.categoryList" @click="changeCategory" keyName="category_name"></up-tabs>
	</Header>
	<view class="book-list">
		<view class="item" v-for="item in state.bookList" :key="item.id">
			<view class="box" @click="toDetailed(item)">
				<img :src="item.book_img" :alt="item.book_name" mode="widthFix">
				<view class="title">{{ item.book_name }}</view>
				<button></button>
			</view>
		</view>
		
	</view>
	<Footer />
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import Header from "@/components/header/index.vue"
import Footer from "@/components/footer/index.vue"
import { category, booklist } from "@/api/book.js"
import { userinfo, borrowlist } from "@/api/public.js"
import { env } from "@/utils/env"
env('api')
const state = reactive({
	categoryList: [],
	bookList: []
})
const form1 = ref(null)
const field = reactive({
	name: '',
})
borrowlist({
	pageIndex: 1,
	pageSize: 10
})
const test = () => {
	form1.value.validate()
}
const rules = reactive({
	name: [{  
      type: 'string',  
      required: true,  
      message: '请填写姓名',  
      trigger: ['blur', 'change'],  
    },
	{
				// 自定义验证函数，见上说明
				validator: (rule, value, callback) => {
					// 上面有说，返回true表示校验通过，返回false表示不通过
					// uni.$u.test.mobile()就是返回true或者false的
					return false;
				},
				message: '手机号码不正确',
				// 触发器可以同时用blur和change
				trigger: ['change','blur'],
			}],
})
const getCategory = () => {
	category().then(res => {
		state.categoryList = res.content || []
		// 不存在分类
		if(!state.categoryList.length) {
			return
		}
		// 存在分类时
		const first = state.categoryList[0]
		getBookList(first.category_id)
	})
}

const getBookList = (category) => {
	booklist({category}).then(res => {
		state.bookList = res.content?.data || []
	})
}

const changeCategory = (e) => {
	getBookList(e.category_id)
}

const toDetailed = (data) => {
	wx.navigateTo({
	  url: `/pages/detailed/index?id=${data.book_id}`,
	})
}

onMounted(() => {
	getCategory()
	getBookList
})


</script>

<style lang="scss" scoped>
.search-warp {
	display: flex;
	align-items: center;
	border: 1px solid #E3E3E3;
	height: 80rpx;
	box-sizing: border-box;
	border-radius: 100px;
	background-color: #fff;
	padding-right: 24rpx;
	width: 100%;
	margin-top: 22px;
	.icon {
		width: 150rpx;
	}
	input {
		outline: none;
		border: none;
		background: none;
		padding: 0;
		width: 100%;
	}
}
.book-list {
	background-color: #EEF8F4;
	display: flex;
	flex-wrap: wrap;
	padding: 0 14rpx;
	.item {
		width: 50%;
		padding: 0 14rpx;
		margin-top: 26rpx;
		box-sizing: border-box;
	}
	.box {
		background-color: #fff;
		box-shadow: 0rpx 10rpx 46rpx 0rpx rgba(0,0,0,0.07);
		border-radius: 32rpx;
		padding: 44rpx 44rpx 0 44rpx;
		image {
			width: 100%;
		}
		.title {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			font-size: 24rpx;
			padding: 16rpx 0;
		}
	}
}
</style>
